import { Component,Fragment} from 'react';
import {Card,List,Typography,Row,Col,Radio,Input,Avatar,Table,Switch,Divider,Button, message} from 'antd';
import router from 'umi/router';
import moment from 'moment';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';
import { connect } from 'dva';
//注入模型类 dispatch
const mapStateToProps = (state) => {
    const ResourceList = state['Resource'].ResourceList;
    //console.log('aa',state);
    return {
      ResourceList,
    };
};
@connect(mapStateToProps)
export default class active extends Component {
    state = {
        listLoading:false,
        removeButtonLoading:false,
        selectedRowKeys:[],
        removeId:[],//需要删除的ids
        refaultData:{},
        switchStatusLoading:false,
    };
    /**
     * 前置函数 在页面加载时就执行的函数
     */
    componentDidMount = () => {
        this.getFetch();//初次加载
    }
    /**
     * 列表数据获取
     */
    getFetch = (params = {}) =>{
        //加载中
        this.setState({ listLoading: true });
        const { dispatch } = this.props;
        dispatch({
            type: 'Resource/select',
            payload:params,
        });
        //加载中取消
        setTimeout(() => {
          this.setState({ listLoading: false });
        },500);
    };
    onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.setState({ selectedRowKeys });
    };
    render(){
        const column = [
            {
              title:'id',
              dataIndex:'id',
              sorter: true,
            },
            {
                title:'名称',
                width:'50%',
                render:(text,item)=>{
                    return (
                        <List.Item>
                        <List.Item.Meta
                        title={<a href={item.url} target="_blank">{item.name}</a>}
                        description={item.description}
                        />
                    </List.Item>
                    )
                }
            },
            {
                title:'更新时间',
                dataIndex:'updatetime',
                width: '20%',
                render: (val) => {return moment(val*1000).format('YYYY-MM-DD HH:mm')},
            },
            {
                title:'是否显示',
                dataIndex:'status',
                filters: [{ text: '显示', value: 1 }, { text: '隐藏', value: 0 }],
                width: '15%',
                render: (text, record) => (
                  <Switch checkedChildren="显示" unCheckedChildren="隐藏" onChange={()=>{
                      this.setState({
                        switchStatusLoading:true
                      });
                    this.props.dispatch({
                        type: 'Resource/setField',
                        payload: {id:record['id'],value:(record['status']==1?0:1),field:'status'},
                        callback:(e)=>{
                            this.setState({ switchStatusLoading: false });
                          if(e.code === 1){
                                message.success(e.msg);
                                setTimeout(() => {
                                    this.getFetch();
                                }, 10);
                              return true;
                          }else{
                            message.error(e.msg);
                          }
                          
                        }
                    });
                    return false;
                  }} defaultChecked={record.status===1?true:false} loading={this.state.switchStatusLoading} />
                )
            },
            {
                title: '操作',
                width: '20%',
                render: (text, record) => (
                  <Fragment>
                    <a onClick={() => {
                      console.log('aaa',record);
                      router.push(`/content/active/index/Update?id=${record['id']}`);
                    }}>编辑</a>
                    <Divider type="vertical" />
                    <a onClick={()=>{
                        console.log('aaa',record);
                    }}>删除</a>
                  </Fragment>
                ),
            }
          ];
        //多选框
        const { removeButtonLoading, selectedRowKeys } = this.state;
        const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        //多选框end
        var { list = [],pagination = false } = this.props.ResourceList || {};
        pagination = Object.assign(pagination,{
            onChange:(page=1,pageSize=10)=>{
                this.getFetch({
                    page:page,
                    pageSize:pageSize
                });
            },
            onShowSizeChange:(page=1,pageSize=10)=>{
                this.getFetch({
                    page:page,
                    pageSize:pageSize
                });
            }
        });
        return (
            <>
            <PageHeaderWrapper>
                <div className={styles.standardList}>
                    <Card bordered={false}>
                        <Row>
                            <Col sm={8} xs={24}>
                            <div className={styles.headerInfo}>
                                <span>我的待办</span>
                                <p>8个任务</p>
                                {true && <em />}
                            </div>
                            </Col>
                            <Col sm={8} xs={24}>
                            <div className={styles.headerInfo}>
                                <span>本周任务平均处理时间</span>
                                <p>32分钟</p>
                                {true && <em />}
                            </div>
                            </Col>
                            <Col sm={8} xs={24}>
                            <div className={styles.headerInfo}>
                                <span>本周完成任务数</span>
                                <p>24个任务</p>
                                {true && <em />}
                            </div>
                            </Col>
                        </Row>
                    </Card>
                    <Card>
                        <div className={styles.tableListButtonList}>
                            <Button icon="plus" type="primary" onClick={()=>{
                                router.push('/content/active/index/Update');
                            }}>
                                新建
                            </Button>
                            <Button type="primary" onClick={() => {
                                this.setState({
                                removeButtonLoading:true,
                                removeId:this.state.selectedRowKeys
                                });
                                // this.onDelete({}, ()=>{this.setState({
                                // selectedRowKeys: [],
                                // removeButtonLoading: false,
                                // })});
                            }} disabled={!hasSelected} loading={removeButtonLoading}>
                            批量删除
                            </Button>
                            <span style={{ marginLeft: 8 }}>
                            {hasSelected ? `已选择 ${selectedRowKeys.length} 个文章` : ''}
                            </span>
                        </div>
                        <Table
                        columns={column}
                        rowSelection={rowSelection}
                        loading={this.state.listLoading}
                        dataSource={list}
                        rowKey="id"
                        pagination={pagination}
                        />
                        {/* <List
                        size="large"
                        rowKey="id"
                        loading={this.state.listLoading}
                        dataSource={list}
                        pagination={pagination}
                        renderItem={item => (
                            <List.Item>
                                <List.Item.Meta
                                avatar={<Avatar src={item.thumb} shape="square" size="large" />}
                                title={<a href={item.id}>{item.name}</a>}
                                description={item.description}
                                />
                                <div className={styles.listContent}>
                                    <div className={styles.listContentItem}>
                                        <span>Owner</span>
                                        <p>{item.user_name}</p>
                                    </div>
                                    <div className={styles.listContentItem}>
                                        <span>开始时间</span>
                                        <p>{moment(item.updatetime).format('YYYY-MM-DD HH:mm')}</p>
                                    </div>
                                </div>
                            </List.Item>
                        )}
                        /> */}
                    </Card>
                </div>
            </PageHeaderWrapper>
            </>
        )
    }
}